<template>
  <a-list :bordered="false">
    <a-list-item v-for="item in accountList" :key="item.wxid">
      <a-list-item-meta>
        <template #title>
          <a-tag checkable color="arcoblue"> 充值  {{ item.amount }} 元</a-tag><a-tag>{{ item.remark }}</a-tag>
        </template>
        <template #description>
          <a-tag>{{ item.createTime }}</a-tag>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
  <div
    style="
      display: flex;
      justify-content: center;
      padding-top: 16px;
      padding-bottom: 16px;
    "
  >
    <a-pagination
      :total="count"
      :page-size="pageSize"
      size="mini"
      simple
      :current="current"
      @change="changePage"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { getAccount } from '@/api/weixin';

  interface AccountItem {
    wxid: string;
    nick: string;
    amount: string,
    remark: string,
    createTime: string
  }

  const current = ref(1);
  const pageSize = ref(15);
  const count = ref(0);
  const loading = ref(false);
  const accountList = ref<AccountItem[]>([]);

  const props = defineProps<{
    ownerWxid: string;
    wxid: string;
  }>();

  const fetchAccountList = async () => {
    loading.value = true;
    try {
      const res: any = await getAccount({
        field: {
          ownerWxid:props.ownerWxid,
          wxid:props.wxid,
        },
        page: current.value,
        pageSize: pageSize.value,
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        accountList.value = res.data.list;
      } else {
        Message.error(res.msg || '获取列表失败');
      }
    } catch (error) {
      console.error('请求失败，请检查网络:', error);
    } finally {
      loading.value = false;
    }
  };

  const changePage = async (e: any) => {
    current.value = e;
    await fetchAccountList();
  };

  // 监听群变化
  watch(
    () => props.wxid,
    (newWxid) => {
      if (newWxid) {
        fetchAccountList(); // 获取新的聊天记录
      }
    },
    { immediate: true }
  );
</script>
